<template>
	<view style="width: 100vw;height: 100vh;">
		<view class="margin8-16 paddingbottom8">
			<view class="BasicInformation backgroundColor borderradius">
				<view class="flex padding" style="padding-bottom: 0;">
					<text class="flex1 textstyle" style="padding-top: 10rpx; font-size: 31rpx;">基础信息</text>
					<image src="../../static/images/people.png" class="icon-img basic-img "
						style="margin-bottom:-10rpx ;"></image>
				</view>
				<view class="linestyle">
					<image src="../../static/images/line1.png" class="line1"></image>
					<image src="../../static/images/line2.png" class="line2"></image>
				</view>
				<view class="textstyle padding">
					<text>姓名：</text>
					<text>{{membershipmanagementData.MembersCredential?membershipmanagementData.MembersCredential.name:membershipmanagementData.WorkerMembersCredential.name}}</text>
				</view>
				<view class="textstyle padding Information">
					<text class="ssgh">所在单位：</text>
					<text>
						<text>{{membershipmanagementData.OrgMemberCredential.issueUnitName}}</text>
					</text>
				</view>
				
 				<view class="textstyle padding Information" style="padding-bottom: 40rpx;">
					<text class="ssgh">所属工会：</text>
					<text>
						<text>{{membershipmanagementData.OrgMemberCredential.orgName}}</text>
					</text>
				</view>
			</view>

			<view class="entrance flex background-f borderradius">
				<view class="flex1 text-center textConttent" @click="gomembershipqrcode">
					<image src="../../static/images/gonghuiruhuima.png" class="entrance-img"></image>
					<view style="font-weight: 700;">工会入会码</view>
				</view>
				<view class="flex1 text-center textConttent" @click="goapprovalmanagement">
					<image src="../../static/images/shenpiguanli.png" class="entrance-img"></image>
					<view style="font-weight: 700;">审批管理</view>
				</view>
				<view class="flex1 text-center textConttent" @click="gomembermanagement">
					<image src="../../static/images/huiyuanguanli.png" class="entrance-img"></image>
					<view style="font-weight: 700;">会员管理</view>
				</view>
			</view>

			<view class="process background-f borderradius steps">
				<view class="flex" style="margin-bottom: 15rpx;">
					<text class="flex1" style="font-weight: 700;">会员发展流程图</text>
					<image src="../../static/images/liucheng.png" mode="" class="icon-img basic-img"></image>
				</view>
				<view class="linestyle">
					<image src="../../static/images/line.png" mode="" class="line1"></image>
					<image src="../../static/images/line1.png" mode="" class="line2"></image>
				</view>
				<view class="">
					<image class="liuchengchulitu" src="../../static/images/liuchengtudaolan.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		toast
	} from '../../utils/common';
	export default {
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			uni.showModal({
				title: '提示',
				content: '是否退出当前页面？',
				success: function(res) {
					if (res.confirm) {
						this.$router.back();
						this.$router.back();
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return true;
		},
		data() {
			return {
				dataInfo: [], // 用户信息数据
				membershipmanagementData: {
				

				},
				steps: [ // 流程步骤数据
					{
						title: '开始',
						isActive: false,
						isCompleted: false,
						className: '' // 用于动态类名
					},
					{
						title: '组织入驻申请',
						isActive: false,
						isCompleted: false,
						className: ''
					},
					{
						title: '基层工会组建人员审批',
						isActive: false,
						isCompleted: false,
						className: ''
					},
					{
						title: '结束',
						isActive: false,
						isCompleted: false,
						className: ''
					}
				]
			}
		},

		onShow() {
			this.getUserInfo()
			this.updateSteps()
		},

		methods: {
			// 更新步骤状态
			updateSteps() {
				// 获取当前步骤索引
				let currentStepIndex = this.showtitle ? 1 : 2;

				this.steps.forEach((step, index) => {
					if (index < currentStepIndex) {
						step.isCompleted = true; // 设置为已完成
						step.isActive = false;
					} else if (index === currentStepIndex) {
						step.isActive = true; // 设置为当前步骤
						step.isCompleted = false; // 当前步骤未完成
					} else {
						step.isCompleted = false; // 未完成
						step.isActive = false;
					}
					// 根据状态设置类名
					step.className = step.isActive ? 'active' : step.isCompleted ? 'completed' : 'unfinished';
				});
			},
			// 获取用户信息
			async getUserInfo() {
				try {
					const {
						platform
					} = uni.getSystemInfoSync();
					const isMobile = platform === 'ios' || platform === 'android';

					const credentials =
						'UnionCredential&OrgMemberCredential&PhoneNumberCredential&(MembersCredential|WorkerMembersCredential)';

					const res = await this.userTopAuth(isMobile, credentials);
					this.formDataSet(res);
					this.dataInfo.push(res);
				} catch (err) {
					this.dataInfo.push(err);
					this.$router.back();
				}
			},

			formDataSet(row) {

				if (row.UnionCredential || row.OrgMemberCredential) {
					this.membershipmanagementData = {
						...row
					}
					
					console.log(this.membershipmanagementData,"this.membershipmanagementData");
					
				} else {
					toast('您不是当前工会组织员')
					this.$router.back();
				}
			},

			gomembershipqrcode() {
				this.$tab.navigateTo(`/pages/work/membershipqrcode`);
			},

			goapprovalmanagement() {
				this.$tab.navigateTo(`/pages/work/approvalmanagement`);
			},

			gomembermanagement() {
				this.$tab.navigateTo(`/pages/work/membermanagement`);
			}
		}
	}
</script>


<style lang="scss" scoped>
	.liuchengchulitu {
		margin-top: 15rpx;
		width: 100%;
		height: 300rpx;
	}

	.textConttent {
		// margin: 0 26rpx;
	}

	.linestyle {
		position: relative;
		padding: 16rpx 0;

		.line1 {
			width: 95%;
			height: 12rpx;
			position: absolute;
		}

		.line2 {
			width: 97%;
			height: 12rpx;
			position: absolute;
			left: 3%;
		}
	}




	.BasicInformation {
		margin-top: 80rpx;

		.textstyle {
			color: rgba(255, 255, 255, 1);
			margin: 10rpx 0;
		}

		.padding {
			padding: 16rpx 34rpx;
		}

		.Information {
			display: flex;

			.ssgh {
				width: 150rpx;
			}
		}

	}


	.linestyle {
		position: relative;
		padding: 16rpx 0;

		.line1 {
			width: 100%;
			height: 12rpx;
			position: absolute;
		}

		.line2 {
			width: 100%;
			height: 12rpx;
			position: absolute;
			left: 3%;
		}
	}

	.steps {
		display: flex;
		flex-direction: column;
		padding: 32rpx;

		.step {
			display: flex;
			align-items: center;
			position: relative;

			.circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
				background: rgba(229, 229, 229, 1); // 默认状态为灰色
			}

			.step-title {
				width: auto;
				height: 108rpx;
				line-height: 108rpx;
				margin-left: 16rpx;
				flex: 1;
			}

			.line {
				width: 1px;
				height: 80rpx;
				border-left: 4rpx dashed rgba(229, 229, 229, 1);
				transform: translateX(-2rpx);
				position: absolute;
				left: 10rpx;
				top: 66rpx;
			}

			// 当前步骤样式
			&.active {
				.circle {
					background: rgba(189, 26, 45, 1); // 红色
				}

				.step-title {
					color: rgba(189, 26, 45, 1); // 可选：标题颜色
				}
			}

			// 已完成步骤样式
			&.completed {
				.circle {
					background: rgba(200, 200, 200, 1); // 灰色
				}

				.step-title {
					color: rgba(200, 200, 200, 1); // 可选：标题颜色
				}
			}

			// 未完成步骤样式
			&.unfinished {
				.circle {
					background: rgba(0, 128, 0, 1); // 绿色
				}
			}
		}
	}

	.entrance {
		padding: 32rpx 0;
		margin: 32rpx 0;
	}

	.entrance-img {
		height: 104rpx;
		width: 104rpx;
	}

	.process-img {
		width: 100%;
	}
</style>